<!-- 死页面-ocr -->
<template>
  <el-dialog v-model="visible" @close="visible=false" :close-on-click-modal="false" width="50%">
    <div style="display: flex;margin-bottom: 10px;">
      <el-upload v-model:file-list="fileList" action="" :before-upload="beforeUpload" :show-file-list="false" multiple>
        <el-button type="primary">批量上传识别</el-button>
      </el-upload>
      <!-- <el-button type="primary" @click="ocr" :loading="loading" style="margin-left:15px;">批量识别</el-button> -->
    </div>
    <el-table :data="tableData" row-key="id" table-layout="auto" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="a" label="文件名称" width="200" />
      <el-table-column prop="c" label="文件内容" width="800" />
      <el-table-column prop="" label="操作" width="200" fixed="right" align="center">
        <template #default="scope">
          <a href="/src/assets/桃花源记.doc" download="桃花源记.doc" style="margin:8px;color: #409eff;">导出至Word</a>
          <a href="/files/example.pdf" download="自定义文件名.pdf" style="margin:8px;color: #409eff;">导出至TXT</a>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button type="primary" @click="submit()">添加至内容</el-button>
    </template>
  </el-dialog>
</template>
        
  <script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus/es'

const visible = ref(false)
const tableData = ref([])
const fileList = ref([])

const beforeUpload = (file: any) => {
	setTimeout(() => {
		tableData.value = []
		tableData.value.push(
			{
				a: '桃花源记.pdf',
				b: 'pdf',
				c: '晋太元中，武陵人捕鱼为业。缘溪行，忘路之远近。忽逢桃花林，夹岸数百步，中无杂树，芳草鲜美，落英缤纷。渔人甚异之，复前行，欲穷其林。林尽水源，便得一山，山有小口，仿佛若有光。便舍船，从口入。初极狭，才通人。复行数十步，豁然开朗。土地平旷，屋舍俨然，有良田、美池、桑竹之属。阡陌交通，鸡犬相闻。其中往来种作，男女衣着，悉如外人。黄发垂髫，并怡然自乐。见渔人，乃大惊，问所从来。具答之。便要还家，设酒杀鸡作食。村中闻有此人，咸来问讯。自云先世避秦时乱，率妻子邑人来此绝境，不复出焉，遂与外人间隔。问今是何世，乃不知有汉，无论魏晋。此人一一为具言所闻，皆叹惋。余人各复延至其家，皆出酒食。停数日，辞去。此中人语云：“不足为外人道也。”既出，得其船，便扶向路，处处志之。及郡下，诣太守，说如此。太守即遣人随其往，寻向所志，遂迷，不复得路。南阳刘子骥，高尚士也，闻之，欣然规往。未果，寻病终，后遂无问津者。',
				d: '2025-05-15',
				e: '管理员'
			},
			{
				a: '桃花源记赏析.jpg',
				b: 'jpg',
				c: '本文通过对桃花源的安宁和乐、自由平等生活的描绘，表现了作者追求美好生活的理想和对现实生活的不满。文章开端，先以美好闲静、“芳草鲜美，落英缤纷”的桃花林作为铺垫，引出一个质朴自然化的世界。在那里，一切都是那么单纯，那么美好，没有税赋，没有战乱，没有沽名钓誉，也没有勾心斗角。甚至连一点吵吵嚷嚷的声音都听不到。人与人之间的关系也是那么平和，那么诚恳。造成这一切的原因，作者没有明说，但从"乃不知有汉，无论魏晋"一句中已隐约透露了消息:原来归根结底，是因为没有一个高踞人民头上为私利互相攻伐的统治集团。这个幻想中的桃源世界，对生活，古诗文网。',
				d: '2025-05-15',
				e: '管理员'
			}
		)
		ElMessage.success('上传成功！')
		return false
	}, 500)
}
const loading = ref(false)
const ocr = () => {
	loading.value = true
	setTimeout(() => {
		loading.value = false
		ElMessage.success('识别成功！')
		tableData.value[0].c =
			'晋太元中，武陵人捕鱼为业。缘溪行，忘路之远近。忽逢桃花林，夹岸数百步，中无杂树，芳草鲜美，落英缤纷。渔人甚异之，复前行，欲穷其林。林尽水源，便得一山，山有小口，仿佛若有光。便舍船，从口入。初极狭，才通人。复行数十步，豁然开朗。土地平旷，屋舍俨然，有良田、美池、桑竹之属。阡陌交通，鸡犬相闻。其中往来种作，男女衣着，悉如外人。黄发垂髫，并怡然自乐。见渔人，乃大惊，问所从来。具答之。便要还家，设酒杀鸡作食。村中闻有此人，咸来问讯。自云先世避秦时乱，率妻子邑人来此绝境，不复出焉，遂与外人间隔。问今是何世，乃不知有汉，无论魏晋。此人一一为具言所闻，皆叹惋。余人各复延至其家，皆出酒食。停数日，辞去。此中人语云：“不足为外人道也。”既出，得其船，便扶向路，处处志之。及郡下，诣太守，说如此。太守即遣人随其往，寻向所志，遂迷，不复得路。南阳刘子骥，高尚士也，闻之，欣然规往。未果，寻病终，后遂无问津者。'
		tableData.value[1].c =
			'本文通过对桃花源的安宁和乐、自由平等生活的描绘，表现了作者追求美好生活的理想和对现实生活的不满。文章开端，先以美好闲静、“芳草鲜美，落英缤纷”的桃花林作为铺垫，引出一个质朴自然化的世界。在那里，一切都是那么单纯，那么美好，没有税赋，没有战乱，没有沽名钓誉，也没有勾心斗角。甚至连一点吵吵嚷嚷的声音都听不到。人与人之间的关系也是那么平和，那么诚恳。造成这一切的原因，作者没有明说，但从"乃不知有汉，无论魏晋"一句中已隐约透露了消息:原来归根结底，是因为没有一个高踞人民头上为私利互相攻伐的统治集团。这个幻想中的桃源世界，对生活.古诗文网>>'
	}, 1500)
}

const emit = defineEmits(['displace'])
const submit = () => {
	setTimeout(() => {
		visible.value = false
		emit('displace', 'ocr')
	}, 300)
}
defineExpose({
	visible
})
</script>
        
  <style lang="scss" scoped>
//搭配el-table里的table-layout="auto"属性，再让每一列里的width为空即可展现出适应表格内容的列宽
:deep(.el-table .cell) {
	width: max-content;
	display: inline-block;
}
</style>
        